<!--
 * @Description:支付场景配置
-->

<template>
  <div class="registered-container payScenarioConfig appMainWarp">
    <el-form :inline="true" :model="searchKey" class="demo-form-inline">
      <el-form-item label="支付场景名称:">
        <el-input v-model="searchKey.directName" placeholder="请输入支付场景名称" />
      </el-form-item>
      <!-- <el-form-item label="支付场景编码:">
        <el-input v-model="searchKey.no" placeholder="请输入支付场景编码" />
      </el-form-item> -->
      <el-form-item label="是否上线:">
        <el-select v-model="searchKey.status" placeholder="请选择">
          <el-option
            v-for="item in searchKey.statusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="onSearch"
        >查询</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="addInfo"
        >添加</el-button>
      </el-form-item> -->
    </el-form>
    <template>
      <el-table
        ref="table"
        v-loading="page.tableLoading"
        center
        class="table"
        :data="searchDate"
        stripe
        border
      >
        <el-table-column type="index" width="90" label="序号" />
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">{{ scope.row.pay_scene_name || "-" }}</template>
        </el-table-column>
        <el-table-column label="支付场景编码" align="center">
          <template slot-scope="scope">{{ scope.row.pay_scene_no || "-" }}</template>
        </el-table-column>
        <el-table-column label="支付场景简码" align="center">
          <template slot-scope="scope">{{ scope.row.scene_short_no || "-" }}</template>
        </el-table-column>
        <el-table-column label="添加时间" align="center">
          <template slot-scope="scope">{{ scope.row.create_time || "-" }}</template>
        </el-table-column>
        <el-table-column label="上线时间" align="center">
          <template slot-scope="scope">{{ scope.row.modify_time || "-" }}</template>
        </el-table-column>
        <el-table-column label="是否上线" align="center">
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="props">
            <div class="btn">
              <el-link
                :underline="false"
                type="primary"
                @click="editInfo(props.row)"
              >修改</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
              <el-link
                :underline="false"
                type="danger"
                @click="deleteInfo(props.row)"
              >删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog
      :title="addModel.item.id ? '修改' : '添加'"
      :visible.sync="addModel.flag"
      width="500px"
    >
      <el-form ref="addModel" :model="addModel.item" label-width="120px">
        <el-form-item label="支付场景名称:" prop="name">
          <el-input
            v-model="addModel.item.name"
            placeholder="请输入支付场景名称"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="支付场景简码:" prop="name">
          <el-input
            v-model="addModel.item.scene_short_no"
            placeholder="请输入支付场景简码"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="支付场景编码:" prop="name">
          <el-input
            v-model="addModel.item.no"
            disabled
            placeholder="请输入支付场景编码"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="是否上线:" prop="status">
          <el-radio-group v-model="addModel.item.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="AddandWriteHandle">确 定</el-button>
      </div>
    </el-dialog>
    <pagination
      :hidden="page.currentPage <= 1"
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSearch"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 分页

import { sceneEdit, delConfig, sceneList } from '@/api/reconcliationConfig/payWaySetup/index'
const defaultAddItem = {
  id: '',
  name: '', // 角色名称
  no: '', // 业务编号
  level: 0,
  parentId: '',
  status: 1 // 1:启用 0:禁用
}
export default {
  name: 'PayScenarioConfig',
  components: {
    Pagination
  },
  data() {
    return {
      searchKey: {
        directName: '', // 支付方式名称
        status: '', // 是否上线
        no: '', // 支付方式编号
        statusList: [
          { id: '', name: '全部' },
          { id: 2, name: '否' },
          { id: 1, name: '是' }
        ]
      },

      searchDate: [],
      addModel: {
        flag: false,
        item: defaultAddItem
      },
      page: {
        tableLoading: false,
        currentPage: 1,
        pageSize: 20,
        totalRow: 0,
        totalPage: 0
      }
    }
  },
  mounted() {
    this.onLoad()
  },
  methods: {
    // addInfo() {
    //   this.addModel.item = Object.assign({}, defaultAddItem)
    //   this.addModel.flag = true
    // },
    editInfo(row) {
      const obj = {}
      obj.id = row.id
      obj.name = row.pay_scene_name
      obj.no = row.pay_scene_no
      obj.scene_short_no = row.scene_short_no
      // obj.status = parseInt(row.status)
      obj.status = row.status === '是' ? 1 : 2
      this.addModel.item = Object.assign({}, obj)
      this.addModel.flag = true
    },
    AddandWriteHandle() {
      const params = {}
      if (this.addModel.item.id) {
        params.id = this.addModel.item.id
      }
      params.scenename = this.addModel.item.name
      params.sceneshortno = this.addModel.item.scene_short_no
      params.status = this.addModel.item.status
      if (!params.scenename) {
        this.$message({
          type: 'warning',
          message: '支付场景名称不能为空！'
        })
        return false
      }
      if (!params.sceneshortno) {
        this.$message({
          type: 'warning',
          message: '支付场景简码不能为空！'
        })
        return false
      }
      this.updateInfo(params)
      // if (this.addModel.item.id) {
      //   this.updateInfo(params)
      // } else {
      //   this.insertInfo(params)
      // }
    },
    updateInfo(params) {
      const that = this
      const loading = this.$loading()
      sceneEdit(params)
        .then((res) => {
          loading.close()
          that.addModel.flag = false
          that.$message({
            type: 'success',
            message: '修改成功'
          })
          that.onLoad()
        })
        .catch(() => {
          loading.close()
        })
    },
    // insertInfo(params) {
    //   const that = this
    //   const loading = this.$loading()
    //   addPay(params)
    //     .then((res) => {
    //       loading.close()
    //       that.addModel.flag = false
    //       that.$message({
    //         type: 'success',
    //         message: '添加成功'
    //       })
    //       that.onLoad()
    //     })
    //     .catch(() => {
    //       loading.close()
    //     })
    // },
    deleteInfo(item) {
      this.$confirm('确定要删除此支付场景吗？删除后不可恢复！', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var params = {}
          var that = this
          params.id = item.id
          params.type = 'scene'
          const loading = this.$loading()
          delConfig(params)
            .then((res) => {
              loading.close()
              that.$message({
                type: 'success',
                message: '删除成功！'
              })
              that.onLoad()
            })
            .catch(() => {
              loading.close()
            })
        })
        .catch(() => {})
    },
    onLoad() {
      this.page.currentPage = 1
      this.onSearch()
    },
    onSearch() {
      var params = {}
      var that = this
      params.page = that.page.currentPage // 当前页数
      params.limit = that.page.pageSize // 每页展示条数
      params.scenename = that.searchKey.directName
      // params.no = that.searchKey.no
      params.status = that.searchKey.status
      that.page.tableLoading = true
      sceneList(params)
        .then(res => {
          that.page.tableLoading = false
          that.searchDate = res.data.result
          that.page.totalPage = res.data.pages
          that.page.totalRow = parseInt(res.data.count)
        })
        .catch(() => {
          that.page.tableLoading = true
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.payWaySetup {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  .demo-form-inline {
    .el-button--primary {
      background-color: #579ef8 !important;
      color: #fff !important;
    }
    // .el-button {
    //   background-color: #e8f4ff;
    //   color: #579ef8;
    //   border: 1px solid rgba(87, 158, 248, 1);
    // }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .viewdetails {
    color: #1890ff;
    cursor: pointer;
  }
  .abnormal {
    color: #f65952;
    cursor: pointer;
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
<style>
.payWaySetup .el-dialog__header {
  text-align: center;
}

</style>
